<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue3+Element UI+Echarts布局示例</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.prod.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/element-plus@2.3.11/dist/index.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/element-plus@2.3.11/dist/index.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#409EFF',
            secondary: '#67C23A',
            warning: '#E6A23C',
            danger: '#F56C6C',
            info: '#909399',
            light: '#F5F7FA',
            dark: '#303133'
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .transition-height {
        transition: height 0.3s ease;
      }
      .shadow-top {
        box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
      }
      .shadow-bottom {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
      }
    }
  </style>
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen">
  <div id="app" class="flex flex-col h-screen overflow-hidden">
    <!-- 顶部区域 -->
    <header class="bg-white shadow-bottom flex items-center justify-between px-6 py-3 fixed top-0 left-0 right-0 z-10">
      <!-- 左侧Logo和标题 -->
      <div class="flex items-center space-x-3">
        <div class="bg-primary text-white p-2 rounded-lg">
          <i class="fa fa-bar-chart text-xl"></i>
        </div>
        <h1 class="text-xl font-bold text-dark">数据可视化平台</h1>
      </div>
      
      <!-- 右侧导航和下拉菜单 -->
      <div class="flex items-center space-x-6">
        <div class="relative">
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="text-dark hover:text-primary cursor-pointer flex items-center">
              <i class="fa fa-th-large mr-2"></i>
              <span>数据视图</span>
              <i class="fa fa-angle-down ml-2"></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="day">日视图</el-dropdown-item>
                <el-dropdown-item command="week">周视图</el-dropdown-item>
                <el-dropdown-item command="month">月视图</el-dropdown-item>
                <el-dropdown-item command="year">年视图</el-dropdown-item>
                <el-divider></el-divider>
                <el-dropdown-item command="custom">自定义视图</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        
        <div class="relative">
          <el-dropdown trigger="click">
            <span class="text-dark hover:text-primary cursor-pointer flex items-center">
              <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="w-8 h-8 rounded-full mr-2 object-cover">
              <span>管理员</span>
              <i class="fa fa-angle-down ml-2"></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <i class="fa fa-user mr-2"></i>个人信息
                </el-dropdown-item>
                <el-dropdown-item>
                  <i class="fa fa-cog mr-2"></i>设置
                </el-dropdown-item>
                <el-divider></el-divider>
                <el-dropdown-item>
                  <i class="fa fa-sign-out mr-2"></i>退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </header>
    
    <!-- 中间内容区域 -->
    <main class="flex-grow overflow-auto mt-16 mb-16 p-4">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 h-full">
        <!-- 第1行图表 -->
        <div class="bg-white rounded-lg shadow-md p-4 h-[300px]">
          <div class="flex justify-between items-center mb-3">
            <h3 class="font-semibold text-lg">销售额趋势</h3>
            <el-tooltip content="查看详情" placement="top">
              <i class="fa fa-ellipsis-v text-gray-400 cursor-pointer"></i>
            </el-tooltip>
          </div>
          <div class="w-full h-[250px]" ref="chart1"></div>
        </div>
        
        <div class="bg-white rounded-lg shadow-md p-4 h-[300px]">
          <div class="flex justify-between items-center mb-3">
            <h3 class="font-semibold text-lg">用户增长分析</h3>
            <el-tooltip content="查看详情" placement="top">
              <i class="fa fa-ellipsis-v text-gray-400 cursor-pointer"></i>
            </el-tooltip>
          </div>
          <div class="w-full h-[250px]" ref="chart2"></div>
        </div>
        
        <div class="bg-white rounded-lg shadow-md p-4 h-[300px]">
          <div class="flex justify-between items-center mb-3">
            <h3 class="font-semibold text-lg">访问来源分布</h3>
            <el-tooltip content="查看详情" placement="top">
              <i class="fa fa-ellipsis-v text-gray-400 cursor-pointer"></i>
            </el-tooltip>
          </div>
          <div class="w-full h-[250px]" ref="chart3"></div>
        </div>
        
        <!-- 第2行图表 -->
        <div class="bg-white rounded-lg shadow-md p-4 h-[300px]">
          <div class="flex justify-between items-center mb-3">
            <h3 class="font-semibold text-lg">销售渠道占比</h3>
            <el-tooltip content="查看详情" placement="top">
              <i class="fa fa-ellipsis-v text-gray-400 cursor-pointer"></i>
            </el-tooltip>
          </div>
          <div class="w-full h-[250px]" ref="chart4"></div>
        </div>
        
        <div class="bg-white rounded-lg shadow-md p-4 h-[300px]">
          <div class="flex justify-between items-center mb-3">
            <h3 class="font-semibold text-lg">热门商品排行</h3>
            <el-tooltip content="查看详情" placement="top">
              <i class="fa fa-ellipsis-v text-gray-400 cursor-pointer"></i>
            </el-tooltip>
          </div>
          <div class="w-full h-[250px]" ref="chart5"></div>
        </div>
        
        <div class="bg-white rounded-lg shadow-md p-4 h-[300px]">
          <div class="flex justify-between items-center mb-3">
            <h3 class="font-semibold text-lg">地域销售分布</h3>
            <el-tooltip content="查看详情" placement="top">
              <i class="fa fa-ellipsis-v text-gray-400 cursor-pointer"></i>
            </el-tooltip>
          </div>
          <div class="w-full h-[250px]" ref="chart6"></div>
        </div>
        
        <!-- 第3行图表 -->
        <div class="bg-white rounded-lg shadow-md p-4 h-[300px]">
          <div class="flex justify-between items-center mb-3">
            <h3 class="font-semibold text-lg">用户活跃度分析</h3>
            <el-tooltip content="查看详情" placement="top">
              <i class="fa fa-ellipsis-v text-gray-400 cursor-pointer"></i>
            </el-tooltip>
          </div>
          <div class="w-full h-[250px]" ref="chart7"></div>
        </div>
        
        <div class="bg-white rounded-lg shadow-md p-4 h-[300px]">
          <div class="flex justify-between items-center mb-3">
            <h3 class="font-semibold text-lg">用户留存率</h3>
            <el-tooltip content="查看详情" placement="top">
              <i class="fa fa-ellipsis-v text-gray-400 cursor-pointer"></i>
            </el-tooltip>
          </div>
          <div class="w-full h-[250px]" ref="chart8"></div>
        </div>
        
        <div class="bg-white rounded-lg shadow-md p-4 h-[300px]">
          <div class="flex justify-between items-center mb-3">
            <h3 class="font-semibold text-lg">转化率漏斗</h3>
            <el-tooltip content="查看详情" placement="top">
              <i class="fa fa-ellipsis-v text-gray-400 cursor-pointer"></i>
            </el-tooltip>
          </div>
          <div class="w-full h-[250px]" ref="chart9"></div>
        </div>
      </div>
    </main>
    
    <!-- 底部区域 -->
    <footer class="bg-white shadow-top text-center py-3 px-6 fixed bottom-0 left-0 right-0">
      <p class="text-sm text-gray-500">© 2025 数据可视化平台 - 版权所有</p>
    </footer>
  </div>

  <script>
    const { createApp, ref, onMounted, nextTick } = Vue;
    
    const app = createApp({
      setup() {
        const chart1 = ref(null);
        const chart2 = ref(null);
        const chart3 = ref(null);
        const chart4 = ref(null);
        const chart5 = ref(null);
        const chart6 = ref(null);
        const chart7 = ref(null);
        const chart8 = ref(null);
        const chart9 = ref(null);
        
        // 下拉菜单命令处理
        const handleCommand = (command) => {
          ElMessage({
            message: `切换到${command === 'day' ? '日' : command === 'week' ? '周' : command === 'month' ? '月' : command === 'year' ? '年' : '自定义'}视图`,
            type: 'info'
          });
          
          // 这里可以添加切换视图的逻辑
          initCharts(command);
        };
        
        // 初始化图表
        const initCharts = (viewType = 'day') => {
          // 生成基于视图类型的数据
          const generateData = () => {
            const days = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
            const weeks = ['第1周', '第2周', '第3周', '第4周', '第5周'];
            const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
            const years = ['2021', '2022', '2023', '2024', '2025'];
            
            let categories, data1, data2, data3;
            
            if (viewType === 'day') {
              categories = days;
              data1 = days.map(() => Math.floor(Math.random() * 100) + 200);
              data2 = days.map(() => Math.floor(Math.random() * 80) + 100);
              data3 = days.map(() => Math.floor(Math.random() * 60) + 50);
            } else if (viewType === 'week') {
              categories = weeks;
              data1 = weeks.map(() => Math.floor(Math.random() * 500) + 1000);
              data2 = weeks.map(() => Math.floor(Math.random() * 300) + 500);
              data3 = weeks.map(() => Math.floor(Math.random() * 200) + 200);
            } else if (viewType === 'month') {
              categories = months;
              data1 = months.map(() => Math.floor(Math.random() * 2000) + 3000);
              data2 = months.map(() => Math.floor(Math.random() * 1000) + 1500);
              data3 = months.map(() => Math.floor(Math.random() * 800) + 800);
            } else {
              categories = years;
              data1 = years.map(() => Math.floor(Math.random() * 10000) + 20000);
              data2 = years.map(() => Math.floor(Math.random() * 5000) + 10000);
              data3 = years.map(() => Math.floor(Math.random() * 4000) + 5000);
            }
            
            return { categories, data1, data2, data3 };
          };
          
          const { categories, data1, data2, data3 } = generateData();
          
          // 图表1：折线图 - 销售额趋势
          const chart1Instance = echarts.init(chart1.value);
          chart1Instance.setOption({
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              }
            },
            xAxis: {
              type: 'category',
              data: categories
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: data1,
              type: 'line',
              smooth: true,
              itemStyle: {
                color: '#409EFF'
              }
            }]
          });
          
          // 图表2：柱状图 - 用户增长分析
          const chart2Instance = echarts.init(chart2.value);
          chart2Instance.setOption({
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            xAxis: {
              type: 'category',
              data: categories
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: data2,
              type: 'bar',
              itemStyle: {
                color: '#67C23A'
              }
            }]
          });
          
          // 图表3：饼图 - 访问来源分布
          const chart3Instance = echarts.init(chart3.value);
          chart3Instance.setOption({
            tooltip: {
              trigger: 'item'
            },
            series: [{
              name: '访问来源',
              type: 'pie',
              radius: '70%',
              data: [
                { value: 335, name: '直接访问' },
                { value: 310, name: '邮件营销' },
                { value: 234, name: '联盟广告' },
                { value: 135, name: '视频广告' },
                { value: 1548, name: '搜索引擎' }
              ]
            }]
          });
          
          // 图表4：环形图 - 销售渠道占比
          const chart4Instance = echarts.init(chart4.value);
          chart4Instance.setOption({
            tooltip: {
              trigger: 'item'
            },
            series: [{
              name: '销售渠道',
              type: 'pie',
              radius: ['40%', '70%'],
              data: [
                { value: 335, name: '线下门店' },
                { value: 310, name: '官方网站' },
                { value: 234, name: '第三方平台' },
                { value: 135, name: '代理商' },
                { value: 1548, name: '其他渠道' }
              ]
            }]
          });
          
          // 图表5：横向柱状图 - 热门商品排行
          const chart5Instance = echarts.init(chart5.value);
          chart5Instance.setOption({
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            xAxis: {
              type: 'value'
            },
            yAxis: {
              type: 'category',
              data: ['商品A', '商品B', '商品C', '商品D', '商品E']
            },
            series: [{
              data: [120, 200, 150, 80, 130],
              type: 'bar',
              itemStyle: {
                color: '#E6A23C'
              }
            }]
          });
          
          // 图表6：散点图 - 地域销售分布
          const chart6Instance = echarts.init(chart6.value);
          chart6Instance.setOption({
            tooltip: {
              trigger: 'item'
            },
            xAxis: {
              type: 'value'
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              symbolSize: 20,
              data: [
                [10.0, 8.04],
                [8.07, 6.95],
                [13.0, 7.58],
                [9.05, 8.81],
                [11.0, 8.33],
                [14.0, 9.96],
                [6.03, 7.24],
                [4.08, 4.26],
                [12.0, 10.84],
                [7.06, 4.82],
                [5.0, 5.68]
              ],
              type: 'scatter',
              itemStyle: {
                color: '#F56C6C'
              }
            }]
          });
          
          // 图表7：雷达图 - 用户活跃度分析
          const chart7Instance = echarts.init(chart7.value);
          chart7Instance.setOption({
            tooltip: {
              trigger: 'item'
            },
            radar: {
              indicator: [
                { name: '日活跃', max: 100 },
                { name: '周活跃', max: 100 },
                { name: '月活跃', max: 100 },
                { name: '互动率', max: 100 },
                { name: '留存率', max: 100 }
              ]
            },
            series: [{
              type: 'radar',
              data: [
                {
                  value: [85, 70, 90, 60, 75],
                  name: '用户活跃度'
                }
              ]
            }]
          });
          
          // 图表8：面积图 - 用户留存率
          const chart8Instance = echarts.init(chart8.value);
          chart8Instance.setOption({
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              }
            },
            xAxis: {
              type: 'category',
              data: categories
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: data3,
              type: 'line',
              areaStyle: {},
              itemStyle: {
                color: '#909399'
              }
            }]
          });
          
          // 图表9：漏斗图 - 转化率漏斗
          const chart9Instance = echarts.init(chart9.value);
          chart9Instance.setOption({
            tooltip: {
              trigger: 'item'
            },
            series: [{
              type: 'funnel',
              data: [
                { value: 1000, name: '访问' },
                { value: 800, name: '注册' },
                { value: 600, name: '添加购物车' },
                { value: 400, name: '下单' },
                { value: 200, name: '支付' }
              ]
            }]
          });
          
          // 监听窗口大小变化，调整图表尺寸
          window.addEventListener('resize', () => {
            chart1Instance.resize();
            chart2Instance.resize();
            chart3Instance.resize();
            chart4Instance.resize();
            chart5Instance.resize();
            chart6Instance.resize();
            chart7Instance.resize();
            chart8Instance.resize();
            chart9Instance.resize();
          });
        };
        
        onMounted(() => {
          nextTick(() => {
            // 添加错误处理，确保图表初始化成功
            try {
              initCharts();
              console.log('图表初始化成功');
            } catch (error) {
              console.error('图表初始化失败:', error);
              alert('图表加载失败，请检查控制台错误信息');
            }
          });
        });
        
        return {
          chart1,
          chart2,
          chart3,
          chart4,
          chart5,
          chart6,
          chart7,
          chart8,
          chart9,
          handleCommand
        };
      }
    });
    
    // 全局配置Element UI
    app.config.globalProperties.$ELEMENT = {
      size: 'small',
      zIndex: 3000
    };
    
    // 注册Element UI组件
    Object.keys(ElementPlus).forEach(key => {
      if (key !== 'default') {
        app.component(key, ElementPlus[key]);
      }
    });
    
    app.mount('#app');
  </script>
</body>
</html>
  